<template>
	<view class="animated fadeIn fast">
		<!-- 菜单 -->
		<view class="paper-left-popup-mask" v-show="show" @tap="hidepopup"></view>
		<view class="paper-left-popup" v-show="show">
			<view class="uni-flex" hover-class="paper-left-popup-h" @tap="lahei">
				<view class="icon iconfont icon-sousuo"></view>拉黑
			</view>
			<view class="uni-flex" hover-class="paper-left-popup-h" @tap="beizhu">
				<view class="icon iconfont icon-qingchu"></view>备注
			</view>
		</view>
		<!-- 背景图+用户信息 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		
		
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="homedata"></home-data>
		</view>
		<view style="height: 20upx; background: #F4F4F4;"></view>
		<!-- tab导航栏切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap"
		 scrollItemStyle="width:33%;" scrollStyle="border-bottom:0;">
		</swiper-tab-head>
		
		<!-- 底部列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<view class="zhuye">
						<view class="message">账号信息</view>
						<view class="message-info">
							<view class="">糗龄:{{zhuye.Qage}}</view>
							<view class="">糗百ID:{{zhuye.Qid}}</view>
						</view>
						<view class="message">个人信息</view>
						<view class="message-info">
							<view class="">星座:{{zhuye.xingzuo}}</view>
							<view class="">职业:{{zhuye.job}}</view>
							<view class="">故乡:{{zhuye.guxiang}}</view>
							<view class="">婚姻:{{zhuye.qg}}</view>
						</view>
					</view>
					
				</swiper-item>
				<!-- 最新 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
							<view class="abc" v-for="(item,index) in zuixin.list" :key="index" >
								<view class="common-list animated fadeInLeft faster" >
									<view class="common-list-l">
										<image :src="item.userpic" mode="widthFix" lazy-load></image>
									</view>
									<view class="common-list-r">
										<view class="list-one">
											<view class="uni-flex">{{item.username}}
											<view class="icon iconfont  tag-sex" :class="[item.sex==0?'icon-nan':'icon-nv']">{{item.age}}</view></view>
											
											<view class="icon iconfont icon-guanbi"></view>
										</view>
										<view class="list-two">{{item.title}}</view>
										<view class="list-three uni-flex">
											
											<image :src="item.titlepic" mode="widthFix" lazy-load v-if="item.titlepic"></image>
											
											<template v-if="item.video">
												<view class="common-list-play icon iconfont icon-bofang ">
												</view>
												<view class="common-list-playinfo">
													{{item.video.looknum}} 次播放 {{item.video.long}}
												</view>
											</template>
											
											<view class="common-list-share" v-if="item.share">
												<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
												<view class="">{{item.share.title}}</view>
											</view>
										</view>
										<view class="list-four">
											<view class="">
												{{item.path}}
											</view>
											<view class="uni-flex">
												<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
												<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
												<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="zuixin.loadtext"></load-more>
							
					</scroll-view>
				</swiper-item>
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
							<nothing></nothing>
							<!-- 上拉加载更多 -->
							<!-- <load-more :loadtext="moren.loadtext"></load-more> -->
							
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>


	</view>
</template>

<script>
	import homeData from "../../components/home/home-data.vue"
	import userSpaceHead from "../../components/user-space/user-space-head.vue"
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";
	import tagSexAge from "../../components/common/tag-sex-age.vue"
	import nothing from "../../components/common/nothing.vue"
	export default {
		components: {
			userSpaceHead,
			homeData,
			swiperTabHead,
			loadMore,
			tagSexAge,
			nothing
		},
		data() {
			return {
				show:false,
				userinfo: {
					bgimg: 1,
					userpic: "../../static/demo/userpic/10.jpg",
					username: "帅宝",
					sex: 0,
					age: 23,
					isguanzhu: false
				},
				homedata:[
					{name:"获赞",num:"10k"},
					{name:"关注",num:11},
					{name:"粉丝",num:12},
				],
				swiperheight: 400,
				tabindex:0,
				tabBars: [
					{name: "主页",id: "zhuye"},
					{name: "糗事",id: "qiushi"},
					{name: "动态",id: "dongtai"}
				],
				zhuye:{
						Qage:"1年8个月",
						Qid:1223,
						xingzuo:"天秤座",
						job:"IT",
						guxiang:"重庆万州",
						qg:"未婚"
				},
				zuixin:{
					loadtext:"上拉加载更多",
					list:[
						// 文字
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"5个好用的电脑软件！",
						titlepic:"",
						video:false,
						share:false,
						path:"重庆  万州",
						sharenum:0,
						commentnum:5,
						goodnum:28
						},
						// 图文
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"一个疯狂想念你的女人，才会给你发这4种消息（深度好文）！",
						titlepic:"",
						video:false,
						share:false,
						path:"重庆  万州",
						sharenum:85,
						commentnum:25,
						goodnum:44
						},
						// 视频
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"如何用手账改变一生？",
						titlepic:"",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:18,
						commentnum:26,
						goodnum:11
						},
						// 分享
						{
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"我是标题",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/9.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						}
					]
				},


			}
		},
		
		onReachBottom() {
			this.loadmore()
		},
		// 监听导航栏点击事件
		onNavigationBarButtonTap(e) {
				if(e.index==0){
					this.showpopup();
				}
		},
		methods: {
			// 操作事件
			lahei(){
				console.log('拉黑')
				this.hidepopup();
			},
			beizhu(){
				console.log("备注")
				this.hidepopup();
			},
			hidepopup(){
				this.show=false;
			},
			showpopup(){
				this.show=true;
			},
			// 点击事件：获取到点击tab内容的tabindex值，达到内容的切换
			tabtap(index) {
				this.tabindex = index;
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			loadmore(){
				
				if (this.zuixin.loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.zuixin.loadtext="加载中...."
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						userpic:"../../static/demo/userpic/10.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:23,
						isguanzhu:false,
						title:"新品发布！",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/8.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						};
					
					this.zuixin.list.push(obj);
					// this.zuixin.list.splice();
					this.zuixin.loadtext="上拉加载更多";
				}, 1000);
				// this.zuixin.loadtext="到底了"
			},
			
			
		}
	}
</script>

<style>
	.user-space-margin {
		margin: 15upx 0;
	}
	.user-space-data{
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		margin-top: -15upx;
	}

.abc{
	padding: 20upx;
}


.common-list{
	display: flex;
	width: 100%;
}

.common-list-l{
	flex-shrink: 0;
}
.common-list-l image{
	width: 90upx;
	height: 90upx;
	border-radius: 100%;
}
.common-list-r>view:nth-child(3)>image{
	width: 100%;
	border-radius: 10upx;
}
.common-list-r{
	flex: 1;
	margin-left: 15upx;
	border-bottom: 1upx solid #EEEEEE;
	padding-bottom: 10upx;
}
.common-list-r>view:nth-child(1)>view:first-child{
	color: #999999;
	font-size: 32upx;
}
.tag-sex{
	background: #007AFF;
	color: #FFFFFF;
	font-size: 28upx;
	padding: 5upx 10upx;
	margin-left: 10upx;
	border-radius: 20upx;
	
}
.common-list-r>view:nth-child(1)>view:last-child{
	/* background: #EEEEEE; */
	padding: 0 10upx;
	font-size: 26upx;
}
.common-list-r>view:nth-child(2){
	font-size: 32upx;
	padding: 12upx 0;
}
.common-list-r>view:nth-child(3){
	position: relative;
	margin-bottom: 10upx;
}

.common-list-play{
	position: absolute;
	color: #FFFFFF;
	font-size: 120upx;
	left: 40%;
	top: 25%;
}
.common-list-playinfo{
	position: absolute;
	color: #FFFFFF;
	right: 10upx;
	bottom: 10upx;
	background:rgba(51,51,51,0.73);
	border-radius: 20upx;
	padding: 0 20upx;
	font-size: 26upx;
}

.common-list-share{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #EEEEEE;
	
	width: 100%;
	border-radius: 10upx;
	padding: 10upx;
}
.common-list-share>image{
	width: 200upx;
	height: 150upx;
	margin-right: 10upx;
}


.common-list-r>view:nth-child(4)>view{
	color: #AAAAAA;
}
.common-list-r>view:nth-child(4)>view:nth-child(2)>view{
	margin-left: 10upx;
	padding-left: 5upx;
}

.list-one{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-four{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-four>view:last-child>view{
	font-size: 26upx !important;
}

.zhuye{
	padding: 0 50upx;
}
.message{
	color: #333333;
	padding: 30upx 0;
	font-size: 32upx;
}
.message-info{
	color: #AAAAAA;
	font-size: 24upx;
	margin-left: 10upx;
	border-bottom: 1upx solid #EEEEEE;
}
.message-info>view:last-child{
	margin-bottom: 20upx;
}
/* 菜单 */
.paper-left-popup-mask{
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 1999;
	}

	.paper-left-popup {
		position: fixed;
		top: 140upx;
		right: 0;
		background: #FFFFFF;
		z-index: 2000;
		width: 35%;
		opacity: 0.7;
		box-shadow: 1upx 1upx 20upx 2upx #CCCCCC;
	}

	.paper-left-popup>view {
		padding: 15upx;
		font-size: 30upx;
	}

	.paper-left-popup>view>view {
		margin-right: 10upx;
		font-weight: 600;
	}
	.paper-left-popup-h{
		background: #EEEEEE;
	}


</style>
